<template>
	<div id="taskDetail">
		<!-------轮播----------->
		<div id="banner">
			<swiper :options="swiperOption">
				<swiper-slide v-for="item in imgList">
					<img :src="item"/>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
			<img class="return" src="../../static/img/taskDetail-01.png" @click="Return"/>
			<div class="gold" v-if="coins != -1">
				我的：{{coins}}
				<img src="../../static/img/taskDetail-02.png"/>
			</div>
		</div>
		<!--------基本信息----------->
		<div class="basic">
			<div class="task_title">
				<img v-if="task.paltform == 1" src="../../static/img/tb.png"/>
				<img v-if="task.paltform == 2" src="../../static/img/tm.png"/>
				<img v-if="task.paltform == 3" src="../../static/img/jd.png"/>
				<p>{{ task.taskName}}
					<span v-if="task.huabeiPayStatus == 1 || task.baitiaoPayStatus == 1" class="label">花呗</span>
					<span v-if="task.creditPayStatus == 1" class="label">信用卡</span>
					<span v-if="task.couponStatus != 0" class="label">优惠券</span>
				</p>
			</div>
			<div class="price">
				<p>拍卖起步价：<span>¥{{returnFloat(task.startPrice)}}</span></p>
				<p>今日开拍份额：<span>{{task.taskList.releaseNum}}</span>份</p>
			</div>
			<div class="reward">
				<p>开奖倒计时：{{Time}}</p>
			</div>
			<div class="people">
				<!--<p><img src="../../static/img/taskDetail-03.png"/><span>{{task.applyNum}}人</span>已参拍</p>-->
				<p>目前最高价：<span style="color: #FF6565; margin-left: 0;">￥{{task.taskList.currMaxPrice}}</span></p>
			</div>
		</div>
		<!--------详细信息---------->
		<div class="detail">
			<ul class="tabs">
				<li @click="tabs = 1" :class="tabs == 1?'tab_active':''">商品详情</li>
				<li @click="tabs = 2" :class="tabs == 2?'tab_active':''">猜你喜欢</li>
			</ul>
			<div v-show="tabs == 1" class="tab1">
				<div v-if="detailImg" v-html="detailImg">
					
				</div>
				<div v-else class="noIntroduce">
				 	<p>试用流程：</p>
					<ul>
						<li>1.申请试用，获得试用资格。</li>
						<li>2.申请通过后，按照搜索流程提示，以<span>{{task.price}}</span>元去指定平台下单。</li>
						<li>3.下单完成后，回赶紧试填写购买付款的订单号。</li>
						<li>4.等待收货→确认收货→给予宝贝评价，并填写试用报告。</li>
						<li>5.报告通过→返还<span>{{task.price}}</span>元到您的赶紧试账户中→试用完成。</li>
					</ul>
					<p>注意事项</p>
					<ul>
						<li>1.禁止使用信用卡、淘金币、优惠券、红包、花呗、天猫积分等。</li>
						<li>2.禁止通过淘宝客，返利网、一淘等返现返利网链接下单。</li>
						<li>以上由于买家违规下单所产生的费用，由买家承担。赶紧试有权冻结其账号，限制提现操作，IP列入黑名单。</li>
					</ul>
					<p>温馨提示：</p>
					<ul>
						<li>1.用户获得试用资格后，请根据时间提示按时提交订单号和试用报告。</li>
						<li>2.若因未按时提交以上信息而被系统取消试用资格，用户可在"可恢复"中选择恢复资格。</li>
						<li>3.若活动已无剩余资格，将无法恢复资格，由此造成的损失需由买家承担。</li>
					</ul>
				 </div>
			</div>
			<div v-show="tabs == 2" class="tab2">
				<div v-for="item in taskList.slice(0,6)" class="task_item">
					<div class="task_img">
						<div class="good_img">
							<img src="../../static/img/imgLoading.png"/>
							<div class="img_box">
								<img :src="item.goodsImage"/>
							</div>
						</div>
						<span v-if="item.type == 5">首单99%中奖</span>
					</div>
					<div class="task_text">
						<div class="task_title">
							<img v-if="item.paltform == 1" src="../../static/img/tb.png"/>
							<img v-if="item.paltform == 2" src="../../static/img/tm.png"/>
							<img v-if="item.paltform == 3" src="../../static/img/jd.png"/>
							<p>{{item.taskName}}</p>
						</div>
						<div class="task_price">
							<p>¥{{item.price}}</p>
							<p>{{item.applyNum}}人申请</p>
						</div>
						<div class="task_input">
							<input type="button" value="免费申请" />
							<p>分享赚<span>12元</span></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-------footer--------->
		<div id="footer">
			<div @click="Return" class="footer_return">
				<img src="../../static/img/taskDetail-05.png"/>
				<p>返回</p>
			</div>
			<div @click="process = true,stop()" class="footer_return">
				<img src="../../static/img/taskDetail-06.png"/>
				<p>流程</p>
			</div>
			<div @click="$router.push('/user/shareUser')" class="exchange">
				<p>分享赚12元</p>
			</div>
			<button @click="isBindAccount(task.paltform, 1)" v-if="applyFlag == 1 && task.type != 3 && task.type != 7 && task.surplusNum > 0">立即参拍</button>
			<button v-if="applyFlag != 3 && task.surplusNum == 0 && (task.taskList==null || task.taskList.surplusNum == 0)" disabled>今日份额已满</button>
			<router-link :to="{name:'processAuction', params: {taskId: taskId}}" v-if="applyFlag == 2 && task.surplusNum > 0">继续参拍</router-link>
			<button v-if="applyFlag == 3" disabled>已参拍</button>
		</div>
		<!--------试用流程---------->
		<div v-show="process" @click="process = false,move()" id="process">
			<div @click.stop="" class="process">
				<p class="process_title"><span></span>试用流程</p>
				<div>
					<img src="../../static/img/taskDetail-09.png"/>
				</div>
			</div>
		</div>
		<!----------余额不足----------->
		<div @click="recharge = false,move()" v-show="recharge" id="recharge">
			<div class="recharge">
				<img src="../../static/img/taskDetail-08.png"/>
				<div class="recharge_text">
					<p>您的账号不足</p>
					<p class="need">{{coins}}金币</p>
					<p class="cue">充值后可直接兑换该商品</p>
				</div>
				<div class="recharge_btns">
					<input @click="recharge = false,move()" type="button" value="残忍拒绝" />
					<router-link to='/user/recharge'>立即充值兑换</router-link>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
import VueAwesomeSwiper from 'vue-awesome-swiper'
import '../../static/css/swiper.min.css'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default {
	name: 'taskDetailAuction',
	data:function(){
		return{
			//-------拍卖新增 start-------
			startPrice: 30,//起拍价
			maxPrice: 35,//目前最高价
			myPrice: '',//我的出价
			todayNum: 10,//今日份数
			Time: '',//倒计时时间
			//-------拍卖新增 end-------
			taskId: '',
			//------轮播图片组----------
			imgList: [
			  		{
			  			imgPath:'./static/img/remove-05.jpg',
			  		},
			  		{
			  			imgPath:'./static/img/remove-04.png',
			  		},
			  		{
			  			imgPath:'./static/img/remove-03.png',
			  		},
			  	],
			coins: -1, //我的金币
			detailImg: '',	// 详情图
		  	task: {
		  		taskList: {
		  			releaseNum: 0
		  		}
		  	},	// 活动详情
		  	applyFlag: 1,	// 是否已申请
			//---------轮播组件-----------
			swiperOption: {
				autoplay: 3000,  //l轮播间隔时间
				autoHeight: true,
//				loop: true,　　//是否自动轮播
				pagination : {el:'.swiper-pagination'}, //轮播图中下标点显示
			},
			tabs: 1,//选项卡切换
			taskList:[//猜你喜欢列表
				{
					Src: '../../static/img/remove-03.png',
					platform: '../../static/img/tm.png',
					title: '森女系列夏季长裙森女系列夏季长裙',
					price: '136',
					people: '601'
				},
				{
					Src: '../../static/img/remove-03.png',
					platform: '../../static/img/tm.png',
					title: '森女系列夏季长裙森女系列夏季长裙',
					price: '136',
					people: '601'
				},
				{
					Src: '../../static/img/remove-03.png',
					platform: '../../static/img/tm.png',
					title: '森女系列夏季长裙森女系列夏季长裙',
					price: '136',
					people: '601'
				},
				{
					Src: '../../static/img/remove-03.png',
					platform: '../../static/img/tm.png',
					title: '森女系列夏季长裙森女系列夏季长裙',
					price: '136',
					people: '601'
				},
				{
					Src: '../../static/img/remove-03.png',
					platform: '../../static/img/tm.png',
					title: '森女系列夏季长裙森女系列夏季长裙',
					price: '136',
					people: '601'
				},
				{
					Src: '../../static/img/remove-03.png',
					platform: '../../static/img/tm.png',
					title: '森女系列夏季长裙森女系列夏季长裙',
					price: '136',
					people: '601'
				},
			],
			process:false,//试用流程显示隐藏
			recharge:false,//充值弹窗显示隐藏
		}
	},
	components: {
	   swiper,
	   swiperSlide
	},
	methods:{
		// 获取商品详情
		detail: function(){
			var _this = this;
			_this.$loading();
			let postData = _this.$qs.stringify({
	        	taskId: _this.taskId
	        });
			_this.$axios.post('/user/auctionTask/public/selectDetail',postData).then(function(res){
			    var data = res.data.result;
			    _this.task = data.task;
			    if(data.wallet != null){
			    	_this.coins = data.wallet.coins;
			    	// 判断是否已申请
			    	_this.isApply();
			    }
			    
				// 获取商品图片列表
				_this.loadScriptString(_this.task.goodsDetailImage);			    
				setTimeout(function(){
					$("#loading").remove();
				}, 500)
			}).catch(function (error) {
			    console.log(error);
			    $("#loading").remove();
			});
		},
		// 判断是否已申请
		isApply: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
	        	taskId: _this.taskId
	        });
			_this.$axios.post('/user/auctionSchedule/checkOperaStatus',postData).then(function(res){
			    var data = res.data;
			    if(data.message == "succ"){
			    	_this.applyFlag = data.result;
			    }else{
			    	_this.$alert(data.result);
			    }
			}).catch(function (error) {
			    console.log(error);
			    $("#loading").remove();
			});
		},
		loadScriptString:function(code) {
			try {
		        code = code.replace(/& #39;/g, "'");
		        code = code.replace(/\[\*\]/g, "*");
				var script = document.createElement("script");
				var _this = this;
				script.type = "text/javascript";
				try {
					// firefox、safari、chrome和Opera
					script.appendChild(document.createTextNode(code));
				} catch (ex) {
					// IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。
					script.text = code;
				}
				document.getElementsByTagName("head")[0].appendChild(script);
				var paltform = this.task.paltform;			
				//淘宝
				if(paltform==1){
					var script = document.createElement("script");
					script.src = "http:" + g_config.descUrl;
					//加载宝贝介绍
					script.type = "text/javascript";
					//引入js链接
					document.getElementsByTagName("head")[0].appendChild(script);	
					//js加载半秒后执行，防止异步获取不到数据
					
					_this.imgList = g_config.idata.item.auctionImages;
			    	var Time = setTimeout(function(){
						_this.detailImg = desc;
					},500);
				}else if(paltform==2){
					var script = document.createElement("script");
					script.src = "http:" + g_config.descUrl;
					_this.imgList = g_config2.actionImages;
					//加载宝贝介绍
					script.type = "text/javascript";
					//获取商品介绍链接
					//引入js链接
					document.getElementsByTagName("head")[0].appendChild(script);	
					//js加载半秒后执行，防止异步获取不到数据
			    	var Time = setTimeout(function(){
						_this.detailImg = desc;
					},500);
				}else{
					this.imgList = [];
					for(var i = 0 ;i<g_config.product.imageList.length;i++){
						this.imgList.push("//img11.360buyimg.com/n1/s450x450_"+g_config.product.imageList[i]);
					}
					let postData = _this.$qs.stringify({
						url: "http:" + g_config.product.desc
					});
					_this.$axios.post('/agent/parser/public/test2',postData).then(function(res){
					    var data = jQuery.parseJSON(res.data.result);
					    _this.detailImg = data.content;
					}).catch(function (error) { 
					    console.log(error);
					});
				}
			}catch (ex) {
				console.log(ex);
				$("#loading").remove();
			}
		},
		// 猜你喜欢
		guess: function(){
			var _this = this;
			_this.$axios.post('/user/auctionTask/public/guessYourLove').then(function(res){
			    var data = res.data.result;
			   _this.taskList = data.list;
			}).catch(function (error) { 
			    console.log(error);
			    $("#loading").remove();
			});
		},
		// 判断有没有绑定账号
		isBindAccount: function(paltform, type){
			var _this = this;
			var token = localStorage.getItem('usertoken');
			if(!token){
				this.$confirm("您还未登录，是否前往登录？", function(){
					_this.$router.replace({
		              path: '../login',
		              query: { redirect: _this.$router.currentRoute.path },
		            })
				});
				return;
			}
	    	_this.$axios.post('/user/info/getBaseInfo').then(function(res){
	    		var data = res.data;
	    		if(data.message == 'succ'){
	    			if(data.result.auctionCancel >= 3){
	    				_this.$alert("由于您多次流拍，现已限制您参与拍卖，如有疑问请联系客服处理。");
	    				return;
	    			}else{
	    				var ptype;
				    	if(paltform == 1 || paltform == 2){
				    		ptype = 1;
				    	}else{
				    		ptype = 2;
				    	}
						let postData = _this.$qs.stringify({
					    	type: ptype
					    });
						_this.$axios.post('/user/bindAccount/getMyBindAccount',postData).then(function(res){
							var data = res.data;
						    if(data.message == "succ"){
						    	if((data.result.length < 1)){
						    		if(ptype == 2){
						    			// 跳转至绑定账号
							    		_this.$confirm("你还未绑定京东账号，是否前往绑定？", function(){
							    			_this.$router.push('/user/accountJD');
							    		});
						    		}else{
						    			// 跳转至绑定账号
							    		_this.$confirm("你还未绑定淘宝账号，是否前往绑定？", function(){
							    			_this.$router.push('/user/accountTB');
							    		});
						    		}
						    	}else{
						    		_this.apply(type);
						    	}
						    }else{
						    	_this.$alert(data.result);
						    }
						}).catch(function(err){
							console.log(err)
						});
	    			}
	    		}
	    	});
		},
		
		// 立即申请
		apply: function(type){
			if(type == 2 && this.coins < this.task.coinsExchange){
				this.recharge = true;
				this.stop();
				return;
			}
			this.$loading();
			var _this = this;
			let postData = _this.$qs.stringify({
				taskId: this.taskId,
				type: type
			});
			_this.$axios.post('/user/auctionSchedule/apply',postData).then(function(res){
			    var data = res.data;
			    if(data.message == "succ"){
			    	_this.$router.push({name: 'processAuction',params:{ taskId: _this.taskId}});
			    }else{
			    	_this.$alert(data.result);
			    }
			    $("#loading").remove();
			}).catch(function (error) { 
			    console.log(error);
			    $("#loading").remove();
			});
		},
		//--------小数点后两位不够补零---------------
		returnFloat:function(value){
			var value=Math.round(parseFloat(value)*100)/100;
			var xsd=value.toString().split(".");
			if(xsd.length==1){
				value=value.toString()+".00";
				return value;
			}
			if(xsd.length>1){
				if(xsd[1].length<2){
					value=value.toString()+"0";
				}
				return value;
			}
		},
		//-------返回上一页-------
		Return: function(){
			this.$router.go(-1);
		},
		/***滑动限制***/
	    stop:function(){
	        var mo=function(e){e.preventDefault();};
	        document.body.style.overflow='hidden';
	        document.addEventListener("touchmove",mo,false);//禁止页面滑动
	    },
	    /***取消滑动限制***/
	    move:function(){
	        var mo=function(e){e.preventDefault();};
	        document.body.style.overflow='';//出现滚动条
	        document.removeEventListener("touchmove",mo,false);
	    },
	    //--------拍卖开奖倒计时-----------
		countDown2: function(){
			var _this = this;
			setInterval(function(){
				var nowDate = new Date();
				var openTime = new Date(_this.task.taskList.openingTime);
				var hour = _this.getzf(parseInt((openTime - nowDate) / 1000 / 60 / 60));
				var min = _this.getzf(parseInt((openTime - nowDate) / 1000 / 60 % 60));
				var sec = _this.getzf(parseInt((openTime - nowDate) / 1000 % 60));
				_this.Time = hour + ':' + min + ':' + sec;
			},1000);
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		},
	},
	created: function(){
		this.taskId = this.$route.params.taskId;
		this.detail();
	    this.guess();
	    this.countDown2();
	},
	updated: function() {
	    $('.tab1').find('*').css('max-width', '100%');
	    $('.tab1').find('*').css('word-break', 'break-all');
	    $('.tab1').find('*').css('white-space', 'pre-wrap');
	    $('.tab1').find('img').css('margin', '0');
	}
}
</script>

<style scoped>
/* ========== */
/* = Banner = */
/* ========== */
#banner{
	position: relative;
}
.swiper-slide{
	width: 100%;
}
.swiper-slide img{
	width: 100%;
	display: block;
}
#banner .return{
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	height: 2.5rem;
	display: block;
	z-index: 10;
}
#banner .gold{
	background-color: rgba(0,0,0,0.7);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	border-radius: 50px;
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	height: 2.5rem;
	z-index: 10;
	padding: 0 0.6rem;
	font-size: 1.2rem;
}
#banner .gold img{
	height: 1.5rem;
	display: block;
	margin-left: 0.5rem;
}
/*-------基本信息---------*/
.basic{
	background-color: #fff;
}
.basic .task_title{
	display: flex;
	align-items: flex-start;
	padding: 1rem;
	box-sizing: border-box;
}
.basic .task_title img{
	height: 1.2rem;
	display: block;
	margin-right: 0.5rem;
	margin-top: 0.3rem;
}
.basic .task_title p{
	width: calc(100% - 1.7rem);
	font-size: 1.4rem;
	color: #4F4F4F;
	line-height: 1.5em;
}
.basic .task_title p span{
	white-space: nowrap;
}
.basic .task_title p span{
	border: 1px solid #F99A99;
	color: #FF6565;
	padding: 0 0.2rem;
	font-size: 1rem;
	margin-left: 0.3rem;
}
.basic .price{
	display: flex;
	justify-content: space-between;
	padding: 0 2.7rem;
	box-sizing: border-box;
	font-size: 1.2rem;
	color: #787878;
}
.basic .price span{
	font-size: 1.6rem;
	color: #FF6565;
	margin: 0 0.5rem;
}
.basic .price p:first-child span{
	text-decoration: line-through;
}
.basic .reward{
	background-color: #FDFCDD;
	border-top: 2px solid #FFF9DF;
	display: flex;
	padding: 0.5rem 2.7rem;
	box-sizing: border-box;
	align-items: center;
	font-size: 1.4rem;
	color: #FF6565;
	margin-top: 1rem;
}
.basic .reward img{
	height: 1.4rem;
	display: block;
	margin-right: 0.5rem;
}
.basic .reward p{
	display: flex;
	align-items: center;
}
.basic .reward span{
	color: #FF9D10;
	font-size: 1.6rem;
	margin: 0 0.3rem;
}
.basic .people{
	display: flex;
	border-top: 1px solid #EEEEEE;
}
.basic .people p{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	font-size: 1.2rem;
	color: #787878;
	padding: 1rem 0;
}
.basic .people p:first-child{
	border-right: 1px solid #EEEEEE;
}
.basic .people p img{
	height: 1.2rem;
	display: block;
}
.basic .people p span{
	margin: 0 0.8rem;
}
/*---------详细信息-----------*/
.detail{
	margin-top: 1rem;
	padding-bottom: 4.6rem;
	box-sizing: border-box;
}
.detail .tabs{
	display: flex;
}
.detail .tabs li{
	width: 50%;
	background-color: #ffffff;
	border-bottom: 1px solid #EEEEEE;
	height: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #4F4F4F;
	font-size: 1.4rem;
}
.detail .tabs li.tab_active{
	color: #FF6565;
	border-bottom: 1px solid #FF6565;
}
.detail .tabs li:first-child{
	border-right: 1px solid #EEEEEE;
}
.tab1{
	padding: 1rem;
	box-sizing: border-box;
	background-color: #fff;
	
}
.tab2{
	display: flex;
	flex-wrap: wrap;
	padding: 1rem;
	box-sizing: border-box;
}
/*------没有详情时--------*/
.noIntroduce{
	padding-bottom: 4rem;
}
.noIntroduce p{
	color: #FF464E;
	font-size: 14px;
	margin-top: 2.4rem;
}
.noIntroduce ul li{
	color: #545454;
	line-height: 2rem;
}
.noIntroduce ul li span{
	color: #FF464E;
}
/*-------猜你喜欢--------*/
.task_item{
	width: calc(50% - 0.5rem);
	background-color: #fff;
	margin-right: 1rem;
	margin-bottom: 1rem;
}
.task_item:nth-child(2n){
	margin-right: 0;
}
.task_item .task_img{
	width: 100%;
	position: relative;
}
.task_item .task_img img{
	width: 100%;
	display: block;
}
.good_img{
	width: 100%;
	position: relative;
	margin-bottom: 0.3rem;
}
.good_img>img{
	width: 100%;
	display: block;
}
.good_img .img_box{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.good_img .img_box img{
	width: 100%;
	display: block;
}
.task_item .task_img span{
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2px 5px;
	font-size: 1.2rem;
	color: #FFFFFF;
	background-color: #FF6565;
}
.task_text{
	padding: 0.5rem;
	padding-bottom: 1rem;
	box-sizing: border-box;
}
.task_item .task_title{
	display: flex;
	align-items: center;
}
.task_item .task_title img{
	height: 1.5rem;
	display: block;
	margin-right: 0.3rem;
}
.task_item .task_title p{
	width: calc(100% - 1.8rem);
	font-size: 1.4rem;
	color: #4F4F4F;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.task_price{
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 1.2rem;
}
.task_price p:first-child{
	color: #FF6565;
	text-decoration: line-through;
}
.task_price p:last-child{
	color: #787878;
}
.task_input{
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
}
.task_input input{
	width: 47%;
	height: 2.5rem;
	background-color: #FF6565;
	color: #FFFFFF;
	border-radius: 3px;
	border: none;
	font-size: 1.2rem;
}
.task_input p{
	width: 47%;
	height: 2.5rem;
	border: 1px solid #EEEEEE;
	box-sizing: border-box;
	text-align: center;
	line-height: 2.5rem;
	color: #4F4F4F;
	font-size: 1.2rem;
	border-radius: 3px;
}
.task_input p span{
	color: #FF6565;
}
/*-----footer-------*/
#footer{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	background-color: #fff;
	height: 4.6rem;
	z-index: 10;
}
.footer_return{
	width: 15%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
	color: #787878;
}
.footer_return img{
	height: 1.8rem;
	display: block;
	margin-bottom: 0.3rem;
}
.footer_return p{
	text-align: center;
}
.noexchange{
	background-color: #bbb !important;
	margin-right: 2px;
}
.exchange{
	width: 35%;
	height: 100%;
	background-color: #FAC342;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.exchange p{
	color: white;
	font-size: 1.4rem;
}
.exchange span{
	color: #B86A01;
	position: absolute;
	bottom: 0.3rem;
	font-size: 1rem;
}
#footer a, #footer button{
	background-color: #FE6664;
	color: #FFFFFF;
	width: 35%;
	height: 100%;
	align-items: center;
	/*display: -webkit-box;
    display: -ms-flexbox;*/
    display: flex;
    -webkit-box-align: center;
    -webkit-box-pack: center;
	justify-content: center;
	font-size: 1.4rem;
	border: none;
}
#footer button:disabled{
	background-color: #bbb;
}
/*---------试用流程----------*/
#process{
	position: fixed;
	background-color: rgba(0,0,0,0.7);
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
	z-index: 11;
}
.process{
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #fff;
	width: 100%;
}
.process>p{
	padding: 1rem;
	border-bottom: 1px solid #EEEEEE;
	box-sizing: border-box;
	color: #4F4F4F;
	display: flex;
	align-items: center;
	font-size: 1.4rem;
}
.process>p span{
	width: 3px;
	height: 1rem;
	background-color: #FF6565;
	margin-right: 0.5rem;
}
.process div{
	padding: 2.5rem 0;
	box-sizing: border-box;
}
.process div img{
	width: 60%;
	margin: 0 auto;
	display: block;
}
/*-------余额不足--------*/
#recharge{
	background-color: rgba(0,0,0,0.7);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 11;
	display: flex;
	align-items: center;
	justify-content: center;
}
.recharge{
	height: 18rem;
	position: relative;
	margin-top: -15%;
}
.recharge img{
	height: 100%;
	display: block;
}
.recharge .recharge_text{
	width: 100%;
	position: absolute;
	top: 5.8rem;
}
.recharge .recharge_text p{
	text-align: center;
	font-size: 1.2rem;
	color: #787878;
}
.recharge .recharge_text p.need{
	font-size: 1.6rem;
	color: #4F4F4F;
	margin: 0.5rem 0;
}
.recharge .recharge_text p.cue{
	font-size: 1.2rem;
	color: #4090FF;
}
.recharge .recharge_btns{
	position: absolute;
	bottom: 1.2rem;
	width: 100%;
	padding: 0 1.5rem;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}
.recharge .recharge_btns input{
	width: 45%;
	height: 3rem;
	background-color: #cbcbcb;
	color: #FFFFFF;
	border: none;
	border-radius: 50px;
	font-size: 1.2rem;
}
.recharge .recharge_btns a{
	width: 45%;
	height: 3rem;
	background-color: #FDA920;
	color: #FFFFFF;
	border-radius: 50px;
	text-align: center;
	line-height: 3rem;
	font-size: 1.2rem;
}
</style>
